<template>
	<div v-bind:class="isUseful ? 'panel-use' : 'panel-nouse'">
		<div class="panel-wrap">
			<template v-if="isUseful">
				<div class="panel-header flex-cnt-btwn" v-if="hasHeader">
					<template v-if="data.avator">
						<img class="logo" v-bind:src="data.avator">
					</template>
					
					<span class="from from-txt fill">{{data.from}}</span>

					<template v-if="headerBtnType === 'close'">
						<button class="btn btn-close" v-on:click="toggleUseful">x</button>
					</template>
					<template v-else-if="headerBtnType === 'more'">
						<button class="btn btn-more iconfont icon-gengduo" v-on:click="toggleMenu" v-clickOutSide="closeMenu"></button>
						<div class="menu" v-show="showMenu">
							<div class="menu-item" v-on:click="submitNotInterested({ type: data.type })">不感兴趣</div>
							<a class="menu-item" v-bind:href="'#'">什么是{{data.from}} ？</a>
						</div>
					</template>
				</div>

				<slot name="content" v-bind:data="data"></slot>
				
				<slot name="footer" v-bind:data="data"></slot>
			</template>
			<template v-if="!isUseful && headerBtnType === 'close'">
				<template v-if="hasItems">
					<div class="panel-header flex-cnt-btwn">
						<template v-if="checked_dislike_num === 0">
							<span class="name">已屏蔽此条。还不想看见哪些?</span>
							<span class="revert-grey" v-on:click="toggleUseful">撤销</span>
						</template>
						<template v-else>
							<span class="name">{{`已选择减少 ` + checked_dislike_num + ` 类内容出现`}}</span>
							<span class="revert-blue" v-on:click="submitDislike({id: data.id, dislike_list: checked_dislike_list})">确认</span>
						</template>
					</div>
					<div class="panel-content flex-cnt-wrap">
						<span v-bind:class="dislike_item.style" v-for="dislike_item in comp_dislike_list" v-on:click="checkDislike(dislike_item.id)" v-bind:key="dislike_item.id">{{dislike_item.name}}</span>
					</div>
				</template>
				<template v-else>
					<div class="panel-header flex-cnt-btwn no-margin-btm">
						<span class="name">已屏蔽此条。</span>
						<span class="revert-grey" v-on:click="toggleUseful">撤销</span>
					</div>
				</template>
			</template>
		</div>
	</div>
</template>
<script>
	import { mapActions } from 'vuex'

	export default {
		name: 'panel',
		props: {
			'data': {
				type: Object
			},
			'headerBtnType': {
				type: String,
				default: 'none',
				validator: (value) => {
					return ['none', 'close', 'more'].indexOf(value) > -1 ? true : false;
				}
			},
			'hasItems': {
				type: Boolean,
				default: true
			},
			'hasHeader': {
				type: Boolean,
				default: true
			}
		},
		data () {
			return {
				isUseful: true,
				dislike_list: [
					{id: 0, name: `React`},
					{id: 1, name: `Web 开发`},
					{id: 2, name: `Vue.js`},
					{id: 3, name: `王下邀月熊创作的内容`},
					{id: 4, name: `Angularjs`}
				],
				checked_dislike_list: [],
				checked_dislike_num: 0,
				showMenu: false
			}
		},
		computed: {
			comp_dislike_list () {
				return this.dislike_list.filter((item) => {
					return (this.checked_dislike_list.indexOf(item.id) < 0 ? (item['style'] = `name-grey`) : (item['style'] = `name-blue`))
				})
			}
		},
		methods: {
			...mapActions({
				submitDislike: 'home:submitDislike',
				submitNotInterested: 'home:submitNotInterested'
			}),
			toggleUseful () {
				this.isUseful = !this.isUseful
			},
			toggleMenu () {
				this.showMenu = !this.showMenu
			},
			closeMenu () {
				this.showMenu = false;
			},
			checkDislike (id) {
				let index = this.checked_dislike_list.indexOf(id)
				if (index < 0) {
					this.checked_dislike_list.push(id)
				} else {
					this.checked_dislike_list.splice(index, 1)
				}
				this.checked_dislike_num = this.checked_dislike_list.length
			}
		}
	}
</script>

<style lang="less" scoped>
	.panel-use {
		width: 100%;
		background-color: #FFF;
		position: relative;
		&:before {
			content: '';
			position: absolute;
			width: 200%;
			// height: 200%;
			transform: scale(.5, .5);
			transform-origin: 0 0;
			border-top: .01rem solid #D8DADD;
			box-sizing: border-box;
		}

		&:after {
			content: '';
			position: absolute;
			width: 200%;
			// height: 200%;
			transform: scale(.5, .5);
			transform-origin: 0 0;
			border-top: .01rem solid #CBCDCF;
			box-sizing: border-box;
		}
	}

	.panel-wrap {
		padding: .15rem;	
	}

	.panel-nouse {
		background-color: #FFF;
		margin: 0 .15rem .1rem;
		padding: .15rem .2rem;

		.panel-header {
			font-size: .16rem;

			.name {
				font-weight: 700;
				color: #333;
			}

			.revert-grey {
				color: #999;
			}

			.revert-blue {
				color: #1977C8;
			}
		}

		.panel-content {
			margin-bottom: -.1rem;
			.name {
				display: block;
				padding: .03rem .08rem;
				margin: 0 .1rem .1rem 0;
			}

			.name-grey {
				.name();
				color: #999;
				border: .01rem solid #999;
			}
			.name-blue {
				.name();
				color: #1977C8;
				border: .01rem solid #1977C8;
			}
		}
	}

	/* panel 头部 */
	.panel-header {
		position: relative;
		margin-bottom: .1rem;
		.logo {
			width: .2rem;
			height: .2rem;
			border-radius: 50%;
		}

		.from {
			margin-left: .1rem;
			color: #999;
		}

		.btn-close {
			color: #DEDEDE;
			font-size: .18rem;
		}

		.btn-more {
			color: #DEDEDE;
			font-size: .24rem;
			color: #999;
		}

		&.no-margin-btm {
			margin-bottom: 0;
		}
	}

	/* panel 底部 */
	.panel-footer {
		color: #999;
	}

	.mask {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: transparent;
		z-index: 666;
	}

	.menu {
		position: absolute;
		top: -.05rem;
		right: -.05rem;
		min-width: 2rem;
		background-color: #FAFAFA;
		box-shadow: .01rem 0 .05rem #999;
		z-index: 777;
		.menu-item {
			display: block;
			font-size: .16rem;
			padding: .1rem .15rem;
			color: #333;
		}
	}
</style>
